<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>登录系统</title>

    <!--引入弹窗swal的CSS-->
    <link rel="stylesheet" type="text/css" href="https://blog.huangwx.cn/css/sweetalert.css">
    <script type="text/javascript" src="https://blog.huangwx.cn/js/sweetalert-dev.js"></script>

    <style type="text/css">
        html {font-size: 10px;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}
        .layout {width: 100%;}
        .layout：after{content: " ";display: block;height: 0;clear: both;visibility: hidden;overflow: hidden;}
        .tonav{background: #061f41;url()center no-repeat;background-size: 100% auto;}
        .tonav .pos-tl {position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);-webkit-transform: translate(-50%,-50%);-moz-transform: translate(-50%,-50%);-ms-transform: translate(-50%,-50%);}
        .tonav nav{padding-top: 20px;padding-bottom: 20px;}
        .login_in .wrap{background-color: #fff;padding: 30px;}
        .login_in .wrap .title{color: #061f41;padding: 10px 0;border-bottom: 1px solid #bfbfbf;position: relative;font-size: 1.8rem;}
        .login_in .wrap .title:after{content: "";bottom: 0;left: 0;width: 150px;height: 2px;background-color: #061f41;}
        .login_in .wrap .title span{display: inline-block;width: 150px;text-align: center;}
        .login_in .wrap .item{width: 305px;height: 41px;margin: 31px 0 15px 0;background-color: #FFF;border: 1px solid #BFBFBF;}
        .login_in .wrap .item .ico{font-size: 1.6rem;color: #BFBFBF;padding: 0 8px;}
        .login_in .wrap input[type="text"], .login_in .wrap input[type="password"]{font-size: 1.4rem;border: none;width: 263px;height: 38px;background-color: #FFF;outline: none;}
        .login_in .wrap .item-submit{text-align: center;}
        .login_in .wrap input[type="submit"]{border: none;color: #fff;background-color: #061f41;padding: 10px 0;font-size: 1.8rem;width: 305px;}
        .login_in .wrap .dl_zidong{text-align: right;margin-bottom: 20px;vertical-align: middle;}
        .login_in .wrap .dl_zidong input {width: 16px;height: 16px;vertical-align: middle;}
        .login_in .wrap .dl_zidong span{vertical-align: middle;}
        .login_in .wrap .dl_title{display: flex;justify-content: space-between;padding-top: 10px;}
        .login_in .wrap .dl_if{color: #061f41;cursor: pointer;}
        .login_in .wrap .dl_forget{color: #6d6e71;}
        .dl_focus{
            border-color: #66afe9;
            outline: 0;
            -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
            box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
        }
        @media (max-width:767px) {
            .tonav{background-size: auto;}
        }
    </style>
</head>
<body style="background-color: rgb(12,6,48)">
<div class="layout tonav pos-r">
    <div class="login_in pos-tl">
        <div class="wrap">
            <center><p class="pd-bottom title"><span>登录系统</span></p></center>
            <!--post方式:action路径需要在路径后加/-->
            <form class="form-login" method="POST" autocomplete="off" action="/login/">
                {%csrf_token%}   <!--csrf验证-->
                <div class="item">
                    <span class="ico i-user"></span>
                   <input type="text" name="phone" id="phone"  value="" placeholder="请输入手机号码" required="required" minlength="11" oninput="if(value.length>11)value=value.slice(0,11)" onblur="checkphone()">
                </div>
                <div class="item">
                    <span class="ico i-unlock-alt"></span>
                    <input type="password" name="password" value="" placeholder="请输入登录密码" required="required" />
                </div>
                <div class="item-submit">
                    <input type="submit" value="登 录"/>
                </div>
                <br/>

<!--                <p style="color: red;text-align: center;font-size: medium">{{ message }}</p>-->

                <div class="dl_title">
                    <a href="/register" class="dl_if">注册新用户</a>
                    <a href="/">返回首页</a>
                    <a href="/forget" class="dl_forget">忘记密码？</a>
                </div>
            </form>
        </div>
    </div>
</div>


<!--处理弹窗-->
<script>
    {% if messages %}
        {% for msg in messages %}
            swal('{{ msg.message }}');
        {% endfor %}
    {% endif %}
</script>

<script type="text/javascript">
    function checkphone() {
    //     var phonenum=phone.value;
    //     if (!phonenum.match(/^1(3|4|5|6|7|8|9)\d{9}$/))
    //     {
    //         swal("请输入正确格式的手机号！");
    //         // alert("请输入正确格式的手机号！");
    //         phone.value ='';
    //         return false;
    //     }
    //     else return true;
    }
</script>
</body>
</html>
